jQuery delay ()
The jQuery.delay() method is used to delay the execution of subsequent
animation methods in a queue.
This is useful when you want to pause between animations or apply a delay
between chained animations.
Syntax
$(selector).delay(duration, [queueName]);
- duration(Required):Specifies the number of milliseconds to delay the execution of the next item in the queue.
- queueName(Optional):Specifies the name of the queue to delay (the default is "fx" for the effects queue).
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery delay() Example</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<button id="animateBtn">Start Animation</button>
<div id="myDiv"></div>
<script>
$(document).ready(function(){
$("#animateBtn").click(function(){
$("#myDiv").animate({ width:
"300px" }, 1000) // First animation: increase width
.delay(1000)
// Delay for 1 second
.animate({ height: "200px" }, 1000) // Second animation:
increase height
.delay(500)
// Delay for 0.5 seconds
.animate({ opacity: 0.5 }, 1000) // Third
animation: decrease opacity
.delay(1500)
// Delay for 1.5 seconds
.animate({ left: "+=100px" }, 1000) // Final animation: move
right
});
});
</script>
</body>
</html>
